<template>
  <div class="left-container">
    <!-- 顶部序列表标题 -->
    <a-tooltip :content="seiesId" position="right" mini>
      <div class="seiesId-box series-active">
        {{ seiesId }}
      </div>
    </a-tooltip>
    <div class="list-box">
      <div v-for="item in lesionList">
        <MenuList
          :key="item.id"
          :title="getPublicDasta(item.id)"
          :sum="item.lesionList.length"
          :lesion-list="item.viewList"
          :is-create="item.id === 4 && route.query.type !== 'view'"
          :current="item"
          :class-name="item.id === 2 ? 'pos-fit' : ''"
          :all-data="lesionList"
        />
      </div>
    </div>
    <!-- 底部提示 -->
    <div class="bottom-tip">
      <div class="bottom-tip-title">
        <span class="bottom-tip-title-circle"></span>
        <span class="bottom-tip-title-content">小提示</span>
      </div>
      <div class="bottom-tip-content">
        <span>按住右键移动以拖动图像</span>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup name="ProcessLeft">
import { useRoute } from 'vue-router'
import MenuList from "./components/MenuList.vue";
import type * as PHStoreType from '@/store/modules/processHeader/type';
import type { RouteLocationNormalizedLoaded } from "vue-router";
const route = useRoute();
const props = defineProps({
  seiesId: {
    type: String,
    default: ''
  },
  lesionList: {
    type: Array<PHStoreType.Lesion>,
    default: [] as PHStoreType.Lesion[]
  }
});

const getPublicDasta = (id: number) => {
  const titleEnum: {[x: number]: string} = {
    1: '位置征象均一致',
    2: '位置一致征象不一致',
    3: '位置不一致',
    4: '审核新增'
  };
  return titleEnum[id];
}
</script>
<style lang="less" scoped>
.left-container {
  width: 180px;
  min-width: 180px;
  max-width: 180px;
  height: 100%;
  background: linear-gradient(180deg, #0c1a21 0%, #192c38 100%);
  overflow-y: auto;
  .seiesId-box {
    width: 100%;
    height: 36px;
    min-width: 180px;
    max-width: 180px;
    padding: 9px 8px;
    text-overflow: ellipsis;
    overflow: hidden;
    color: #fff;
    font-size: 14px;
    user-select: none;
    cursor: pointer;
    border-bottom: 1px solid #000;
  }
  .seiesId-box:hover {
    background: #28353c;
  }
  .seiesId-box.series-active {
    background: #28353c;
  }
  .list-box {
    height: calc(100% - 114px);
    overflow-y: auto;
  }
  .bottom-tip {
    padding: 12px;
    border-top: 1px solid #000;
    height: 78px;
    min-height: 78px;
    max-height: 78px;
    &-title {
      display: flex;
      align-items: center;
      &-circle {
        display: inline-block;
        width: 4px;
        height: 4px;
        background-color: #f7bc5a;
        border-radius: 50%;
      }
      &-content {
        font-weight: 400;
        font-size: 12px;
        color: #f7bc5a;
        margin-left: 4px;
      }
    }
    &-content {
      margin-top: 4px;
      font-weight: 400;
      font-size: 12px;
      line-height: 22px;
      color: #ccc;
    }
  }
}
</style>
